<![CDATA[<template>
    <el-card class="expand-card" shadow="never">
        <div class="expand-content">
            <div class="expand-section">
                <div class="section-title">
                    <i class="el-icon-shopping-cart-2"></i>
                    Order & Product Info
                </div>
                <div class="section-content">
                    <el-scrollbar class="scroll-container">
                        <div class="scrollable-row">
                            <div class="info-row">
                                <div class="info-item">
                                    <span class="label">Order No:</span>
                                    <span class="value">{{ order.shopify_order_number }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">Amount:</span>
                                    <span class="value">${{ order.pay_amount }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">Status:</span>
                                    <el-tag size="small" :type="order.pay_status === 1 ? 'success' : 'danger'">
                                        {{ payStatusMap[order.pay_status] }}
                                    </el-tag>
                                </div>
                                <div class="info-item">
                                    <span class="label">Created:</span>
                                    <span class="value">{{ order.created_at.split(' ')[0] }}</span>
                                </div>
                            </div>
                        </div>
                    </el-scrollbar>
                    <el-scrollbar class="scroll-container">
                        <div class="scrollable-row">
                            <div class="info-row">
                                <div class="info-item">
                                    <span class="label">Product:</span>
                                    <span class="value">{{ order.product_name }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">Variant:</span>
                                    <span class="value">{{ order.variant_name }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">Delivery:</span>
                                    <el-tag size="small" :type="order.delivery_num === 0 ? 'danger' : 'success'">
                                        {{ order.delivery_num }}
                                    </el-tag>
                                </div>
                                <div class="info-item">
                                    <span class="label">Proxy:</span>
                                    <span class="value">{{ order.proxy_num }}</span>
                                </div>
                            </div>
                        </div>
                    </el-scrollbar>
                </div>
            </div>

            <div class="expand-section">
                <div class="section-title">
                    <i class="el-icon-user"></i>
                    User Info
                </div>
                <div class="section-content">
                    <el-scrollbar class="scroll-container">
                        <div class="scrollable-row">
                            <div class="info-row">
                                <div class="info-item">
                                    <span class="label">Username:</span>
                                    <span class="value">{{ order.username }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">ACLs:</span>
                                    <span class="value">{{ order.acl_selected || 'None' }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">Expires:</span>
                                    <span class="value">{{ order.expired_at.split(' ')[0] }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">Reset:</span>
                                    <span class="value">{{ order.reset_time ? order.reset_time.split(' ')[0] : 'Not yet' }}</span>
                                </div>
                            </div>
                        </div>
                    </el-scrollbar>
                </div>
            </div>
        </div>
    </el-card>
</template>

<script>
export default {
    name: 'OrderExpandDetail',
    props: {
        order: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            payStatusMap: {
                0: 'Unpaid',
                1: 'Paid'
            }
        }
    }
}
</script>

<style scoped>
.expand-card {
    margin: 0 10px;
    background-color: #fafafa;
    border: none;
}

.expand-content {
    padding: 20px;
}

.expand-section {
    margin-bottom: 20px;
}

.section-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #409EFF;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-content {
    background: white;
    border-radius: 8px;
    padding: 15px;
}

.scroll-container {
    margin-bottom: 10px;
}

.info-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.label {
    color: #606266;
    font-weight: 500;
}

.value {
    color: #303133;
}
</style>]]>
